<template>
	<view class="demo" @click="getGoodInfo(icardall.goodsId,icardall.goodsType)">
		<lazyLoad threshold="-200" border-radius="10" :image="icardall.goodsMainImgUrl">
		</lazyLoad>
		<view class="pre-sale" v-if="icardall.thispresale">预售</view>
		<view class="textwidth">
			<view class="card-name" v-html="icardall.goodsName">
				<!-- {{icardall.goodsVarieties | strLength(6)}} -->
			</view>
			<view class="card-address">
				{{icardall.goodsProductionArea | strLength(12)}}
			</view>
			<view class="card-price">
				￥{{icardall.goodsPrice | pointLength(4)}}
			</view>
		</view>
	</view>
</template>


<script>
	import lazyLoad from "../common/lazyLoad"
	export default {
		data() {
			return {
				thispresale: 1
			}
		},
		components: {
			lazyLoad
		},
		props: {
			icardall: {
				type: Object,
				require: true
			}
		},
		methods: {
			getGoodInfo(id, type) {
				this.pushNewPage("product", {
					id,
					type
				})
			}
		}
	}
</script>

<style scoped>
	.demo {
		/* width: 100%; */
		border-radius: 8px;
		background-color: #ffffff;
		position: relative;
		overflow: hidden;
	}

	.textwidth {
		background-color: #FFFFFF;
		position: relative;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		top: -10rpx;
		padding-left: 18rpx;
		padding-right: 18rpx;
	}

	.card-name {
		font-size: 28rpx;
		font-weight: bold;
		color: rgba(56, 56, 56, 1);
		/* 文本单行显示省略号 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.card-address {
		font-size: 20rpx;
		color: rgba(128, 128, 128, 1);
	}

	.card-price {
		font-size: 20rpx;
		color: #fc6c44;
	}

	.pre-sale {
		width: 100%;
		height: 40rpx;
		background: rgba(255, 103, 61, 0.5);
		color: #FFFFFF;
		border-radius: 8rpx;
		top: -48rpx;
		margin-bottom: -40rpx;
		text-align: center;
		position: relative;
		float: left;
	}
</style>
